<template>
    <el-container style="padding: 20px; max-width: 400px; margin: auto;">
        <el-button type="primary" @click="handleTest" style="margin-top: 10px;">
            测试
        </el-button>
    </el-container>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import type { FormInstance } from 'element-plus'
import { ElMessage } from 'element-plus'

const handleTest = () => {

    //  var  let   const
    // var 存在变量提升  
    // let cont 块级作用域  const 是对 let 的增强

    //捕获变量怪异之处
    for (var i = 0; i < 10; i++) {
        setTimeout(() => { console.log(i) }, i * 100)
    }
    //打印 全是 10
    // setTimeout 是在若干毫秒之后执行一个函数，并且是在for循环结束之后，for循环之后，i的值为10，故而打印10

    //重新定义及屏蔽
    //使用var 声明时，不在乎声明多少次，只会得到一个
    var a = 1;
    var a = 2;
    var a = 3;
    console.log("a的值", a) //3
    //但是let 不行，let 属于块级作用域，在一个作用域中只能声明一次
    let b = 1;
    // let b = 2;  报错

    let list: number[] = [1, 2, 3, 4]
    console.log("list", list);



}




</script>

<style scoped>
.el-input {
    width: 100%;
}
</style>
